<template>
  <div>
    <el-form ref="imgForm" :model="form" :rules="rules" label-width="120px">
      <!-- <el-form-item label="老人编号" prop="id">
        <el-input v-model.trim="form.id" :disabled="true" placeholder="老人编号"> </el-input>
      </el-form-item> -->
      <el-form-item label="老人姓名" prop="name">
        <el-input v-model.trim="form.name" placeholder="老人姓名"></el-input>
      </el-form-item>
      <el-form-item label="老人住址" prop="address">
        <el-input v-model.trim="form.address" :maxlength="60" placeholder="老人住址"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="idcard">
        <el-input v-model.trim="form.idcard" placeholder="身份证号"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="msg">
        <el-input type="textarea" v-model="form.msg" placeholder="请输入备注"></el-input>
      </el-form-item>
      <el-form-item class="contacts-add" style="text-align: right;">
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="cancle">关闭</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import * as RegExp from '@/utils/RegExp'
import * as APIDailycare from '@/api/dailycare'
export default {
  name: 'older-edit',
  components: {
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    ...mapState('d2admin/user', [
      'info'
    ]),
  },
  data () {
    return {
      // 老人姓名
      form: {},
      // 表单校验
      rules: {
        /* id: [
          { required: true, message: '重新生成老人id', trigger: 'blur' }
        ], */
        name: [
          { required: true, message: '请输入老人姓名', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入老人住址', trigger: 'blur' }
        ],
        idcard: [
          {
            pattern: RegExp.IDCard,
            message: '请输入正确的身份证号',
            trigger: 'blur'
          }
        ],
      },
    }
  },
  mounted () {
  },
  watch: {
    data: {
      handler: function (newVal) {
         this.getRiolderInfo(newVal.id)
      },
      // 可以一进页面就触发监听器  监听器自带的immediate
      immediate: true,
      deep: true
    }
  },
  methods: {
    getRiolderInfo(id){
      const self = this;
      APIDailycare.riolderInfo({ id: id }).then(res => {
         self.form = {
           id: res.id,
           name: res.name,
           idcard: res.idcard,
           msg: res.msg,
           address: res.address
         }
      })
    },
    // 添加
    onSubmit () {
      const self = this;
      this.$refs.imgForm.validate((valid) => {
        if (valid) {
          APIDailycare.riolderEdit(self.form).then(res => {
            self.cancle()
            self.load()
          })
        }
      })
    },
    load () {
      this.$emit('load')
    },
    cancle () {
      this.$refs.imgForm.resetFields()
      this.$emit('cancle')
    }
  }
}
</script>

<style lang="scss">
.el-select{
  width: 100%;
}
.el-date-editor.el-input{
  width: 100%;
}
.type-add-input {
  textarea {
    font-family: arial;
  }
}
i.icon-uploader-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  vertical-align: bottom;
}
.task-image {
  width: 80px;
  height: 80px;
  position: absolute;
  cursor: pointer;
  border: 1px solid #f5f7fa;
  .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
  }
  &:hover {
    // border: 1px dashed $theme-table-button-view-text-color;
  }
  i {
    font-size: 20px;
  }
}
.task-form-item {
  height: 33px;
}
.older-image {
  border: 1px solid transparent;
  box-sizing: border-box;
  width: 100%;
  height: 220px;
  img {
    width: 100%;
    height: 100%;
  }
}
.zhuapai_active {
  position: relative;
  width:100%;
  height: 220px;
  margin: 0 auto;
  text-align: center;
  color: #4ABE84;
  background-color: #fff;
  box-shadow:0px 2px 7px 0px rgba(85,110,97,0.35);
  border-radius:7px;
  border:1px solid rgba(74,190,132,1);
  box-sizing: border-box;
}
.zhuapai_active:before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  border: 17px solid #4ABE84;
  border-top-color: transparent;
  border-left-color: transparent;
}
.zhuapai_active:after {
  content: '';
  width: 5px;
  height: 12px;
  position: absolute;
  right: 6px;
  bottom: 6px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
}
.older-uploader {
  width: 148px;
  height: 148px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background-color: #fbfdff;
}
.manage-uploader {
	.el-upload {
		width: 148px;
		height: 148px;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
    background-color: #fbfdff;
	}
}
.manage-uploader .el-upload:hover {
	border-color: #409EFF;
}
.older-avatar {
  width: 100%;
  height: 100%;
}
.older-footer {
  margin-top: 20px;
  text-align: right;
}
i.imgs-uploader-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    vertical-align: bottom;
  }
</style>
